<!-- 编辑设备页面 -->
<template>
  <div class="equip_edit" v-loading='showFinsh' element-loading-background="rgba(248, 248, 248, 1)" element-loading-text="正在渲染计算模型，请耐心等待..." >
    <div class="equip-container">
      <HeatExchangerDesignInfo
        v-if="equipInfo.equip_class.includes('换热器')"
        class="design-info"
      />
      <HeatExchangerRQ
        v-else-if="equipInfo.equip_class.includes('容器')"
        class="design-info"
      ></HeatExchangerRQ>

      <HeatExchangerQG
        v-else-if="equipInfo.equip_class.includes('球罐')"
        class="design-info"
      ></HeatExchangerQG>

      <HeatExchangerTQ
        v-else-if="equipInfo.equip_class.includes('塔器')"
        class="design-info"
      ></HeatExchangerTQ>

      <HeatExchangerFYQ
        v-else-if="equipInfo.equip_class.includes('反应器')"
        class="design-info"
      ></HeatExchangerFYQ>

      <HeatExchangerCG
        v-else-if="equipInfo.equip_class.includes('大型储罐')"
        class="design-info"
      ></HeatExchangerCG>
      <div
        style="
          width: 60%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          color: #666;
        "
        v-else
      >
        请选择正确的设备种类
      </div>
      
    
      <ModelView
        class="model"
        :shapesDataCal="shapesDataCal"
        :nozzlesDataCal="nozzlesDataCal"
        :CalPipeSuppPreWeld='CalPipeSuppPreWeld'
        :PlantformPreWeldedPart='PlantformPreWeldedPart'
        canvasWidth="900"
        canvasHeight="500"
        @initFinsh ='initFinsh'
        @initImgFinsh = 'initImgFinsh'
      />

    
      <ToolBar  v-if="showInitS" class="tool_bar" :equip_oid="route.query.equip_oid" />
      
    </div>

    <div v-if="showInitS" class="bottom_from">
      <bottomBEMType  v-if="equipInfo.equip_class.includes('换热器')" :equipInfo='equipInfo'></bottomBEMType>
     <!-- <bottomFormTypeE  v-if="
          equipInfo.equip_class.includes('换热器') &&
          equipInfo.installation_mode == '耳座'
        "></bottomFormTypeE>
      <bottomFormType
        v-else-if="equipInfo.equip_class.includes('换热器')&&
        equipInfo.installation_mode !== '鞍座'
        "
      ></bottomFormType>
      <bottomFormTypeA  v-else-if="
          equipInfo.equip_class.includes('换热器') &&
          equipInfo.installation_mode == '鞍座'
        "></bottomFormTypeA>  -->
          
      <bottomFormTypeVessel
        v-else-if="
          equipInfo.equip_class.includes('容器') &&
          equipInfo.installation_mode !== '鞍座'
        "
      ></bottomFormTypeVessel>
      <bottomFormTypeVesselW
        v-else-if="
          equipInfo.equip_class.includes('容器') &&
          equipInfo.installation_mode == '鞍座'
        "
      ></bottomFormTypeVesselW>
      <bottomFormTypec v-else></bottomFormTypec>
    </div>
  </div>
</template>

<script setup name="EditEquipment">
import { ElMessageBox ,ElLoading} from "element-plus";
import {
  defineAsyncComponent,
  ref,
  onMounted,
  watch,
  onActivated ,
  onUpdated,
  onDeactivated,
  onErrorCaptured
} from "vue";
import { onBeforeRouteLeave } from 'vue-router';
import axios from "axios";
import { useRoute } from "vue-router";
import { useEquipmentStore } from "../../../src/stores/equipment";
import { GetBEMProcessDatasFromDataCenter } from "../../api/equipment";
// 引入组件

import HeatExchangerRQ from "./components/heatExchangerVessel.vue";
import HeatExchangerQG from "./components/heatExchangerBallCans.vue";
import HeatExchangerTQ from "./components/heatExchangerTowers.vue";
import HeatExchangerFYQ from "./components/heatExchangerReactor.vue";
import HeatExchangerCG from "./components/heatExchangerTanks.vue";
const HeatExchangerDesignInfo = defineAsyncComponent(() =>
  import("./components/heatExchangerDesignInfo.vue")
);
const ModelView = defineAsyncComponent(() =>
  import("./components/modelView.vue")
);
const ToolBar = defineAsyncComponent(() => import("./components/toolBar.vue"));

const bottomFormType = defineAsyncComponent(() =>
  import("./components/bottomFormType.vue")
);
const bottomFormTypeA = defineAsyncComponent(() =>
  import("./components/bottomFormTypeA.vue")
);
const bottomFormTypeE = defineAsyncComponent(() =>
  import("./components/bottomFormTypeE.vue")
);
const bottomFormTypeVessel = defineAsyncComponent(() =>
  import("./components/bottomFormTypeVessell.vue")
);
const bottomFormTypeVesselW = defineAsyncComponent(() =>
  import("./components/bottomFormTypeVesselw.vue")
);
const bottomFormTypec = defineAsyncComponent(() =>
  import("./components/bottomFormTypec.vue")
);


const bottomBEMType = defineAsyncComponent(() =>
  import("./components/bottomBEMType.vue")
);
/* 定义变量内容 */
const route = useRoute();


/* 定义生命周期内容 */

let getCalPipeSuppPreWeldDatas =async (equipOid) => {
  let res = await axios({
    url: "/api/EquipPreWeldedParts/CalPipeSuppPreWeldDatas",
    method: "GET",
    params: { equip_oid: equipOid },
  })
  
  CalPipeSuppPreWeld.value = res.data
}

let PlantformPreWeldedPart  = ref([['初始数据']])
let GetPlantformPreWeldedPartDatas =async (equipOid) => {
  let res = await axios({
    url: "/api/EquipPreWeldedParts/GetPlantformPreWeldedPartDatas",
    method: "GET",
    params: { equip_oid: equipOid },
  })
  
  PlantformPreWeldedPart.value = res.data
}



let showFinsh = ref(true)

let initBool = ref(false)
let initImg = ref(false)
let initFinsh = (bool) => {
  console.log(bool,'11')
  initBool.value = true
}
let initImgFinsh = (bool) => {
  console.log(bool,'2')
  initImg.value = true
}

watch([initImg,initBool],()=>{
  if(initImg.value && initBool.value){
    console.log('333')
    showFinsh.value = false
  }})



let shapesDataCal = ref([]);
let nozzlesDataCal = ref([]);
let store = useEquipmentStore();
let equipInfo = ref({});
let loading = ref(false);
let loadingText = ref("");
let n = ref(-1);
let CalPipeSuppPreWeld = ref(['初始数据'])

let showInitS = ref(false)

let timeInterval = null

let findDom = (loading)  => {
  timeInterval = setInterval(() => {
    console.log('findDom')
    let arr = document.querySelectorAll('.equip_edit .el-button')
        arr.forEach((item,index)=>{
        item.style.display = 'none'
        if(arr.length - 1 === index){
          loading.close()
        }
       })
  }, 300);
  sessionStorage.setItem("timeInterval", timeInterval)
}

watch(
  () => store.computedCount,
  () => {
    showInitS.value = sessionStorage.getItem("showINit")
   
    if(Object.keys(route.query).length !== 0){
      showInitS.value = true
      sessionStorage.setItem("equip_oid", route.query.equip_oid);
    equipInfo.value = JSON.parse(sessionStorage.getItem(route.query.equip_oid));
    
    getShapesCalculatedDatas(route.query.equip_oid);
    getNozzlesCalculatedDatas(route.query.equip_oid);
    getCalPipeSuppPreWeldDatas(route.query.equip_oid)
    GetPlantformPreWeldedPartDatas(route.query.equip_oid)
    }else{
      showInitS.value = false
      let id = sessionStorage.getItem("idid");
      equipInfo.value = JSON.parse(sessionStorage.getItem(id));
      console.log(equipInfo.value)
      getShapesCalculatedDatas(id);
    getNozzlesCalculatedDatas(id);
    getCalPipeSuppPreWeldDatas(id)

    GetPlantformPreWeldedPartDatas(id)
    }

    if(sessionStorage.getItem('authButton')&&!JSON.parse(sessionStorage.getItem('authButton'))){
      const loading = ElLoading.service({
      lock: true,
      text: '正在生成浏览页面，请稍等...',
       background: 'rgba(255,255, 255, 1)',
     })
      setTimeout(()=>{
        findDom(loading)
     
      },5000)
    }
  },
  { immediate: true }
);



/* 定义函数内容 */
function getShapesCalculatedDatas(equipOid) {
  // DONE: 从数据库获取基本体计算后数据
  axios({
    url: "/api/shape/GetEquipmentShapeCal",
    method: "GET",
    params: {
      equip_oid: equipOid,
    },
  }).then((res) => {
    console.log(res)
    if (res.data&&res.data.length>0) {
      
      shapesDataCal.value = res.data;
    }else{
      shapesDataCal.value = [];
    }
  });
}

function getNozzlesCalculatedDatas(equipOid) {
  // DONE: 从数据库获取管口计算后数据
  axios({
    url: "/api/nozzle/GetEquipmentNozzleCal",
    method: "GET",
    params: { equip_oid: equipOid },
  }).then((res) => {
    
    if (res.data&&res.data.length>0) {
    
      nozzlesDataCal.value = res.data;
    }else{
      nozzlesDataCal.value = [];
    }
  });
}



let showModel = ref(true);




onMounted(() => {
 
  sessionStorage.setItem("equip_oid", route.query.equip_oid);
 
  setTimeout(() => {
    showModel.value = false;
  }, 1000);
});
</script>

<style scoped>
.equip-container {
  position: relative;
  width: 100%;
  display: flex;
  /* justify-content: space-between; */
}

.design-info {
  width:47%;
  margin-right: 8px;
}

.model {
  border-radius: 4px;
}

.tool_bar {
  background-color: #fff;
  margin-left: 8px;
}
</style>
